<template>
  <div>
    <div class="page">
      <div class="top-div">
        <el-button type="primary" @click="addDormitoryPoup" plain>添加宿舍</el-button>
      </div>
      <div class="body-div">
        <el-table
          :data="tableData"
          height="550"
          border
          style="width: 100%">
          <el-table-column
            prop="dormitoryName"
            label="宿舍">
          </el-table-column>
          <el-table-column
            prop="address"
            label="地址">
          </el-table-column>
          <el-table-column
            fixed="right"
            label="修改宿舍"
            width="100">
            <template slot-scope="scope">
              <el-button slot="reference" @click="changeDormitoryClick(scope.row)"
                         type="text" size="small">
                修改宿舍信息
              </el-button>
            </template>
          </el-table-column>
          <el-table-column
            fixed="right"
            label="删除宿舍"
            width="100">
            <template slot-scope="scope">
              <el-popconfirm
                @confirm="deleteDormitoryClick(scope.row)"
                title="确定删除吗？">
                <el-button slot="reference"
                           type="text" size="small">
                  删除宿舍
                </el-button>
              </el-popconfirm>

            </template>
          </el-table-column>
        </el-table>
      </div>

      <el-dialog title="创建宿舍" :visible.sync="dormitoryPoup">
        <el-form ref="form" :model="dormitoryForm" label-width="120px">
          <el-form-item label="宿舍名字" >
            <el-input v-model="dormitoryForm.dormitoryName"></el-input>
          </el-form-item>
          <el-form-item label="宿舍地址" >
            <el-input v-model="dormitoryForm.address"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="createDormitory" >立即创建</el-button>
            <el-button @click="dormitoryPoup = false">取消</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>

      <el-dialog title="修改宿舍信息" :visible.sync="changeDormitoryTag.tag">
        <el-form ref="form" :model="changeDormitoryTag.dormitoryMsg" label-width="120px">
          <el-form-item label="宿舍名字" >
            <el-input v-model="changeDormitoryTag.dormitoryMsg.dormitoryName"></el-input>
          </el-form-item>
          <el-form-item label="宿舍地址" >
            <el-input v-model="changeDormitoryTag.dormitoryMsg.address"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="changeDormitory" >立即修改</el-button>
            <el-button @click="changeDormitoryTag.tag = false">取消</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>

    </div>
  </div>
</template>

<script>
  import {createDormitoryByPost, getDormitoryListByGet, deleteDormitoryByGet, changeDormitoryByPost} from '../../config/index';

  // 单纯的宿舍管理
    export default {
      data(){
          return{
            dormitoryPoup: false,
            dormitoryForm: {
              address: '',
              dormitoryName: ''
            },
            formLabelWidth: '120px',
            tableData: [{
              dormitoryName: '宿舍1',
              address: '测试数据1'
            }],
            changeDormitoryTag: { // 修改宿舍标记
              tag: false, // 是否修改
              dormitoryMsg: { // 要修改的宿舍信息
              }
            }
          }
      },
      methods: {
        changeDormitoryClick(row){
          this.changeDormitoryTag.tag = true; // 代表要去修改宿舍信息
          this.changeDormitoryTag.dormitoryMsg = row; // 要修改的宿舍信息
        },
        changeDormitory(){
          var _this = this;
          // 真的要触发修改宿舍操作
          // 创建宿舍
          var res = changeDormitoryByPost({
            "id": this.changeDormitoryTag.dormitoryMsg.id + "",
            "address": this.changeDormitoryTag.dormitoryMsg.address,
            "dormitoryName": this.changeDormitoryTag.dormitoryMsg.dormitoryName
          });
          res.then((res)=>{
            if(res.status == 200){
              //  修改成功, 刷新宿舍列表, 关闭弹窗
               _this.changeDormitoryTag.tag = false
              _this.getDormitoryList()
            }
          }).catch((e)=>{
            console.log("changeDormitoryByPost: 失败",e);
          })
        },
        deleteDormitoryClick(row) {
          var _this = this;

          // 删除宿舍
          var res = deleteDormitoryByGet(row.id);
          res.then((res)=>{
            if(res.status == 200){
              // 删除之后, 刷新宿舍列表
              _this.getDormitoryList()
            }
          }).catch((e)=>{
            console.log("deleteDormitoryByGet: 失败",e);
          })
        },
        addDormitoryPoup(){
          this.dormitoryPoup = true
        },
        createDormitory(){
          var _this = this;

          // 创建宿舍
          var res = createDormitoryByPost({
            "address": this.dormitoryForm.address,
            "dormitoryName": this.dormitoryForm.dormitoryName
          });
          res.then((res)=>{
            if(res.status == 200){
              // 创建成功, 刷新宿舍列表, 关闭弹窗
              _this.dormitoryPoup = false
              _this.getDormitoryList()
            }
          }).catch((e)=>{
            console.log("createDormitoryByPost: 失败",e);
          })
        },
        getDormitoryList(){
          var _this = this;
          // 获取宿舍列表
          var res = getDormitoryListByGet();
          res.then((res)=>{
            if(res.status == 200){
              // 把新宿舍列表, 赋值给 tableData
              _this.tableData = res.data;
            }
          }).catch((e)=>{
            console.log("getDormitoryListByGet: 失败",e);
          })
        }
      },
      mounted() {
        this.getDormitoryList()
      }
    }
</script>

<style scoped>
  .page{
    width: 100%;
    height: 100%;
  }
  .top-div{
    height: 50px;
    padding: 30px 30px 10px;
  }
  .body-div{
    padding: 0 30px;
  }
</style>
